

import React,{ Component } from 'react';

import { Form, Icon, Input, Button,InputNumber,TreeSelect } from 'antd';
const FormItem = Form.Item;
const SHOW_PARENT = TreeSelect.SHOW_PARENT;

// const treeData = [{
//   label: '工单组',
//   value: '工单组',
//   key: '0-0',
//   disableCheckbox: true,
//   children: [{
//     label: '工单组1',
//     value: '0-0-0',
//     key: '0-0-0',
//   }],
// }, {
//   label: '测试组',
//   value: '测试组',
//   key: '0-1',
//   disableCheckbox: true,
//   children: [{
//     label: '测试组1',
//     value: '测试组1',
//     key: '0-1-0',
//   }, {
//     label: '测试组2',
//     value: '测试组2',
//     key: '0-1-1',
//   }, {
//     label: '测试组3',
//     value: '测试组3',
//     key: '0-1-2',
//   }],
// }];

const treeData = [{
  label: 'Node1',
  value: '0-0',
  key: '0-0',
  children: [{
    label: 'Child Node1',
    value: '0-0-0',
    key: '0-0-0',
  }],
}, {
  label: 'Node2',
  value: '0-1',
  key: '0-1',
  children: [{
    label: 'Child Node3',
    value: '0-1-0',
    key: '0-1-0',
  }, {
    label: 'Child Node4',
    value: '0-1-1',
    key: '0-1-1',
  }, {
    label: 'Child Node5',
    value: '0-1-2',
    key: '0-1-2',
  }],
}];
//水平登录栏，常用在顶部导航栏中
class TestTreeSelect5 extends Component {
    constructor(props) {
        super(props);
        this.state = {
            //arr: [],
            //defaultArr: [1,2]
            value: ['0-0-0'],
        }
    }
    componentDidMount() {
        //this.props.form.validateFields();
    }
    // shouldComponentUpdate (nextProps,nextState) {

    // }
    /**
     *
     * onSubmitEvent() 提交
     */
    onSubmitEvent(e) {
        e.preventDefault();
        console.log("提交");
        this.props.form.validateFields((err,value)=>{
            if(!err) {
               console.log('得到的值是：',value);
            }else {
                console.log('错误提示：',err);
            }
        });
    }
    selectEvent(value) {
    	console.log("什么时候触发：");
    }
    onChange = (value) => {
        console.log('onChange ', value, arguments);
        this.setState({ value });
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        const tProps = {
            treeData,
            value: this.state.value,
            //onChange: this.treeSelectChange.bind(this),
            treeCheckable: true,
            showCheckedStrategy: SHOW_PARENT,
            searchPlaceholder: '请搜索',
            dropdownStyle: {
                height: 480,
            },
            treeDefaultExpandAll: true,
            //父子选中不受关联
            treeCheckStrictly: true,
            treeCheckable: true,
            showSearch: true,
            allowClear: true,
            multiple: true,
            treeNodeFilterProp: 'label',
            onChange: this.onChange,
        };
        //console.log("render this.state.value = ", this.state.value, "this.props.form.value = ", this.props.form.getFieldValue("email"))
        return (
            <Form onSubmit={ this.onSubmitEvent.bind(this)}>
                <div>
                    <FormItem>
                        {
                            getFieldDecorator('email',{
                                //initialValue: this.state.value1,
                                rules: [{ required: true, message: '邮件客服不能为空!' }],
                            })(
                                <TreeSelect {...tProps} />
                            )
                        }
                        
                    </FormItem>
                </div>
                <FormItem>
                    <Button
                        type="primary"
                        htmlType="submit"
                    >
                        提交
                    </Button>
                </FormItem>
            </Form>
        )
    }
}
export default Form.create()(TestTreeSelect5);

